<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悦诗风吟注册会员</title>
    <style>
        .out{
            border: solid 1px #aaa;
            width: 380px;
            height: 50px;
            margin-bottom: 28px;
        }
        .name{
            width: 70px;
            display: inline-block;
            padding: 15.5px 10px;
            margin-left: 10px;
            margin-right: 15px;
            text-align-last: justify;
            font-size: 14px;
        }
        .inp{
            height: 25px;
            width: 200px;
            border: none;
            color: #aaa;
            outline: none;
        }
        .p{
            display: none;
            margin-top: 3px;
            margin-bottom: 9px;
            color: #aaa;
            font-size: 10px;
        }
        #btn{
            border: none;
            width: 380px;
            height: 50px;
            background-color: #024137;
            color: #fff;
            text-align: center
        }
        /* 设置注册界面在正中间 */
        #center{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
        #img1{
            width: 160px;
            height: 160px;
            position: absolute;
            right: 240px;
            top: 240px;
        }
        #img2{
            width: 140px;
            height: 140px;
            position: absolute;
            right: 95px;
            top: 255px;
        }
        #img3{
            position: absolute;
            top: 59px;
            left: 475px;
        }
        #img4{
            position: absolute;
            top: 40px;
            left: 30px;
            width: 400px;
            height: 500px;
        }
        #btn1{
            position: absolute;
            top: 410px;
            right: 300px;
            width: 100px;
            height: 30px;
            background-color: #024137;
            color: #fff;
            border: none;
        }
    </style>
</head>
<body>
    <div id="center">
        <div class="out">
            <span class="name">账号</span>
            <input class="inp" type="email" value="请输入您的邮箱账户"/>
        </div>
        <p class="p">请输入邮箱地址</p>
        <div class="out">
            <span class="name">设置密码</span>
            <input class="inp" type="text" value="建议至少使用两种字符组合"/>
        </div>
        <p class="p">建议至少使用两种字符组合,密码大于六位数</p>
        <div class="out">
            <span class="name">确认密码</span>
            <input class="inp" type="text" value="请再次输入密码"/>
        </div>
        <p class="p">请再次输入密码</p>
        <button id="btn">立即注册</button>
    </div>
    <img id="img1" src="img/小程序.png" alt="">
    <img id="img2" src="img/公众号.png" alt="">
    <img id="img3" src="img/logo.png" alt="">
    <img id="img4" src="img/t3.jpg" alt="">
    <button id="btn1">返回主页</button>
    <script>
        var out = document.getElementsByClassName('out');
        var inp = document.getElementsByClassName('inp');
        var p = document.getElementsByClassName('p');
        var arr = [];  //存放文本框下方出现提示信息
        var inparr = [] //存放输入框默认信息
        for(var i=0;i<p.length;i++){
            arr[i] = p[i].innerText;
        }

        for(var j=0;j<inp.length;j++){
            inparr[j] = inp[j].value;
        }

        for(let i=0;i<inp.length;i++){
            inp[i].onfocus = function(){
                if(inp[i].value == inparr[i]){
                        this.value =""; 
                }
                inp[i].style.color = "black";
                p[i].style.display = "block";
                out[i].style.marginBottom = 0 + 'px';   
                // 使得每次聚焦时都能出现正确的提示字体
                out[i].style.borderColor = "#aaa"
                out[i].style.borderWidth = 1 + "px";
                p[i].innerText = arr[i];
                p[i].style.color = "#aaa";      
            }                   
        }
        // onblur事件的其他情况
        function other(a,b,c,i){
            if(a.value == ''){   //当只是点击一下输入框后鼠标失去焦点后恢复默认内容
                a.value = inparr[i];
                a.style.color = '#aaa';
            }
            //使得每次点击时边框始终保持正确颜色
            if(b.style.borderColor == "red"){
                b.style.borderColor = "#aaa"
                b.style.borderWidth = 1 + "px";
            }
            c.style.display = "none";
            b.style.marginBottom = 28 + 'px';
        }
        inp[0].onblur = function(){                                
            if(inp[0].value != ""){
                var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                var isok = reg.test(inp[0].value);
                if(!isok){
                    p[0].innerText = "邮箱格式不正确，请重新输入！";
                    p[0].style.color = "red";
                    out[0].style.borderColor = "red";
                    out[0].style.borderWidth = 1.5 + "px";
                    p[0].style.marginBottom = 8.5 + "px";
                }else{
                    p[0].innerText = '邮箱格式正确';
                }
            }else{                  
                other(inp[0],out[0],p[0],0)      
            }   
        }    
        inp[1].onblur = function(){     
            if(inp[1].value != ""){
                if(inp[1].value.length < 6){
                    p[1].innerText = "长度需大于6";
                    p[1].style.color = "red";
                    out[1].style.borderColor = "red";
                    out[1].style.borderWidth = 1.5 + "px";
                    p[1].style.marginBottom = 8.5 + "px";                    
                }else{                        
                    p[1].innerText = "密码设置成功";
                }
            }else{
                other(inp[1],out[1],p[1],1)
            }
        }
        inp[2].onblur = function(){ 
            if(inp[2].value != ""){
                if(inp[1].value == "" || inp[1].value == inparr[1]){
                    p[2].innerText = '请先设置密码';   //当没有设置密码而再次输入密码时进行相关提示
                    p[2].style.color = "red";
                    out[2].style.borderColor = "red";
                    out[2].style.borderWidth = 1.5 + "px";
                    p[2].style.marginBottom = 8.5 + "px";
                }else{  //                 
                    if(inp[2].value != inp[1].value){
                        p[2].innerText = '两次输入密码不一致';  //两此密码输入不相同
                        p[2].style.color = "red";
                        out[2].style.borderColor = "red";
                        out[2].style.borderWidth = 1.5 + "px";
                        p[2].style.marginBottom = 8.5 + "px";
                    }else if(inp[2].value == inp[1].value){ //设置密码但长度小于6再次输入相同时
                        if(inp[1].value.length < 6){
                            p[2].innerText = '请在设置密码时输入正确格式的密码';  
                            p[2].style.color = "red";
                            out[2].style.borderColor = "red";
                            out[2].style.borderWidth = 1.5 + "px";
                            p[2].style.marginBottom = 8.5 + "px";
                        }else{
                            p[2].innerText = "密码确认成功";  //正确设置密码且两次输入相同
                        }
                    }                        
                }               
            }else{
                other(inp[2],out[2],p[2],2)
            }
        }
    </script>
    <script>
        // 返回悦诗风吟网站主页
        var btn1 = document.getElementById('btn1');
        btn1.onclick = function(){
            history.back();
        }
    </script>
</body>
</html>